<template>
  <div>
    <!-- 头部 -->
    <HomeHeader :navList="navList"></HomeHeader>
    <!-- 某一频道的轮播图 -->
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
      <van-swipe-item v-for=" banner in bannerList" :key="banner.id">
        <a :href="banner.targetUrl">
          <img style="width:100%" :src="banner.picUrl" alt="">
        </a>
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图下的数据 -->
    <div style="background-color: #f4f4f4; padding-top: .27rem;">
      <div class="otherListMain" v-for="categoryItem in categoryItemList" :key="categoryItem.category.id">
        <p>{{ categoryItem.category.name }}</p>
        <p>{{ categoryItem.category.frontName }}</p>

        <van-row class="otherListRow">
          <van-col span="12" v-for="item in categoryItem.itemList" :key="item.id" @click="toDetail($event, item.id)">
            <div class="otherListColMain">
              <img style="width: 4.53rem; background-color: #f4f4f4;" :src="item.listPicUrl">
              <p>{{ item.name }}</p>
              <span class="newPrice">￥{{ item.retailPrice }}</span>
              <span class="oldPrice" v-if="item.counterPrice">￥{{ item.counterPrice }}</span>
            </div>
          </van-col>

        </van-row>
      </div>
    </div>
  </div>
</template>
    
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import homeApi, {
  type CateGoryListModel,
} from '@/api/home'
import { showNotify } from 'vant';
import homeListApi, { type OtherChannelList, type CategoryItemListModel } from '@/api/homeList'
import { useRoute, useRouter } from 'vue-router';


const route = useRoute()
const router = useRouter()
// 点击商品列表中的某个商品跳转到商品详情的页面
const toDetail = (e: MouseEvent, id: number) => {
  router.push(`/detail?goodsId=${id}`)
}


// 用于存储导航栏数据
const navList = ref<CateGoryListModel>([])
// 获取导航栏数据的函数
const getNavListData = async () => {
  try {
    let result = await homeApi.getNavList()
    navList.value = result.data.categoryList

  } catch (error) {
    showNotify({ type: 'danger', message: '获取导航栏数据失败，请重试' });

  }
}

// 获取路由上携带的query中的categoryId参数
const categoryId = ref<number>(route.query.categoryId as any)
// 存储某个频道的轮播图数据
const bannerList = ref<OtherChannelList>([])
// 存储某个频道的商品列表数据
const categoryItemList = ref<CategoryItemListModel>([])
// 获取某个频道的数据
const getOneChannelData = async () => {
  try {
    let result = await homeListApi.getOneChannel(categoryId.value)
    // 存储某个频道的轮播图数据
    bannerList.value = result.data.currentCategory.bannerList
    // 存储某个频道的商品列表数据
    categoryItemList.value = result.data.categoryItemList

  } catch (error) {
    showNotify({ type: 'danger', message: '获取数据失败，请重试' });
  }
}


onMounted(() => {
  getNavListData()
  getOneChannelData()
})

</script>
    
<style scoped>
/* 轮播图相关样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: .53rem;
  line-height: 4rem;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe {
  height: 4.5rem;
  margin-top: -0.13rem;
}

/* 轮播图下的列表展示 */
.otherListMain {
  background-color: #fff;
  margin-top: .27rem;
}

.otherListMain p {
  text-align: center;
  line-height: .5rem;
}

.otherListMain>p:nth-child(1) {
  font-size: .43rem;
  padding-top: .53rem;
}

.otherListMain>p:nth-child(2) {
  font-size: .32rem;
  color: #999;
}

.otherListMain .otherListRow {
  margin-top: .21rem;
  margin-left: .27rem;

}

.otherListMain .otherListRow .otherListColMain {
  width: 4.6rem;
  height: 7.38rem;
}

.otherListMain .otherListRow .otherListColMain img {
  width: 100%;
  border-radius: .27rem;
}

.otherListMain .otherListRow .otherListColMain p {
  font-size: .37rem;
  text-align: left;
}

.otherListMain .otherListRow .otherListColMain .newPrice {
  color: red;
  font-size: .43rem;
  font-weight: bold;
}

.otherListMain .otherListRow .otherListColMain .oldPrice {
  color: #999;
  text-decoration: line-through;
  font-size: .32rem;
}
</style>